<template>
  <div class="main" v-if="isShow">
    <div class="item">
      <span class="close" @click="close">关闭</span>
      <img src="../assets/img/icon128.png" alt>
    </div>
    <div class="item item2">
      <p>上章鱼世界APP,获取更好体验</p>
      <p class="xp">签到获取章鱼丸</p>
    </div>
    <div class="item" @click="handelItem">
      <img class="xz" src="../assets/img/download_btn.png" alt>
    </div>
  </div>
</template>
<script>
import { isWeixin } from "../utils/index";
import { Toast } from "mint-ui";
import { openUrl } from "../utils/index";
export default {
  name: "",
  data() {
    return {
      isShow: false
    };
  },
  mounted() {
    if (!localStorage.zyDownloadAppIsShow) {
      this.isShow = true;
      if (isWeixin()) {
        Toast({
          message: "建议请点击左上角浏览器打开！",
          duration: 3000
        });
      }
    }
  },
  methods: {
    close() {
      this.isShow = false;
      localStorage.zyDownloadAppIsShow = false;
    },
    handelItem() {
      openUrl("http://www.912cc.com/WKLoad.aspx");
    }
  }
};
</script>
<style lang="stylus" scoped>
.main {
  width: 7.5rem;
  margin: 0 auto;
  height: 0.91rem;
  line-height: 0.91rem;
  display: flex;
  position: relative;

  // border: 1px solid rgba(201, 201, 201, 1);
  .item {
    .close {
      color: rgba(167, 167, 167, 1);
      font-size: 11px;
      margin: 0 5px;
    }

    img {
      width: 0.68rem;
      height: 0.68rem;
      margin-left: 10px;
    }

    .xz {
      width: 1.26rem;
      height: 0.55rem;
    }
  }

  .item2 {
    flex: 0 1 4rem;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    height: 0.91rem;
    line-height: 0.45rem;
    margin-left: 10px;

    p {
      flex: 1;
    }

    .xp {
      color: rgba(167, 167, 167, 1);
      font-size: 10px;
    }
  }
}
</style>


